<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
	.examinfo_page_title{margin:30px;}
	#page_title_font{font-weight: bold;font-size: 30px;color: #5D5D5D;}
	.examinfo_register_form{border: 1px solid lightgray;width:752px;margin: auto;}
	.examinfo_level_div label{display: inline-block;background-image:url("../img/view/review/star_deselected.png");background-repeat:no-repeat;width:30px;height:30px;padding: 10px 10px;}
	.textarea_wrapper{width:720px;margin:15px;text-align: left;}
	.evaluation_wrapper{margin-left: 30px;width: 400px;height: 100px;float: left;}
	.info_div{width: 290px;height: 150px;float: left;}
	.button_wrapper{width:720px;margin:15px;text-align: center;}
	.title_font{font-weight: bold;font-size: 15px;color: #5D5D5D;}
	#examinfo_title{background-color:#FAFAFA;border: 1px solid #CFCFCF;border-radius: 2px;width: 700px;height: 20px;margin-top: 5px;margin-left: 10px;margin-bottom: 25px;}
	#examinfo_process, #examinfo_question{background-color:#FAFAFA;border: 1px solid #CFCFCF;border-radius: 2px;width: 700px;height: 100px;margin-top: 5px;margin-left: 10px;margin-bottom: 25px;}
	#examinfo_title_font{color: #5D5D5D;}
	#examinfo_title_font, #examinfo_process_font, #examinfo_question_font{margin-left: 10px;}
	#examinfo_process_font{color: #3DB7CC;}
	#examinfo_question_font{color: #DF4D4D;}
	#examinfo_level_font{color: #FF5E00;}
	.examinfo_level_text{font-weight: bold;font-size: 12px;color: #5D5D5D;}
</style>
<script type="text/javascript">
	$(function() {
		$("#examinfo_examdate").datepicker();
	});

	function registerExaminfo() {
		var examinfo_title = document.getElementById("examinfo_title").value
				.replace(/\s/g, "");
		var examinfo_process = document.getElementById("examinfo_process").value
				.replace(/\s/g, "");
		var examinfo_question = document.getElementById("examinfo_question").value
				.replace(/\s/g, "");
		var examinfo_examdate = document.getElementById("examinfo_examdate").value
				.replace(/\s/g, "");

		if (examinfo_title == "") {
			alert("제목을 입력해주세요.");
			return;
		} else if (examinfo_process == "") {
			alert("과정을 입력해주세요.");
			return;
		} else if (examinfo_question == "") {
			alert("질문을 입력해주세요.");
			return;
		} else if (examinfo_examdate == "") {
			alert("시험날짜를 입력해주세요.");
			return;
		}

		if (confirm("입시 리뷰를 등록하시겠습니까?"))
			document.getElementById("regiForm").submit();
	}

	function score_selected(index) {
		$('.examinfo_level_value_div>label')
				.css(
						{
							"display" : "inline-block",
							"background-image" : "url('../img/view/review/star_deselected.png')",
							"width" : "30px",
							"height" : "30px",
							"background-repeat" : "no-repeat",
							"padding" : "10px 10px"
						});

		$('.examinfo_level_value_div>input').attr('value', index);
		for ( var i = 1; i <= index; i++) {
			$('#examinfo_level_label_' + i)
					.css(
							{
								"display" : "inline-block",
								"background-image" : "url('../img/view/review/star_selected.png')",
								"width" : "30px",
								"height" : "30px",
								"background-repeat" : "no-repeat",
								"padding" : "10px 10px"
							});
		}

		var textSpan = $('.examinfo_level_text');

		if (index == 1)
			textSpan.html("매우 쉬움");
		if (index == 2)
			textSpan.html("쉬움");
		if (index == 3)
			textSpan.html("보통");
		if (index == 4)
			textSpan.html("어려움");
		if (index == 5)
			textSpan.html("매우 어려움");
	}
</script>
</head>
<body>
<div class="examinfo_register_form">
	<div class="examinfo_page_title">
		<font id="page_title_font">입시 리뷰 작성하기</font><br><br>
	</div>
	<form action="review.do" id="regiForm" method="post">
		<input type="hidden" id="command" name="command" value="registerExaminfo">
		<input type="hidden" id="majorunit_no" name="majorunit.majorunit_no" value="${ majorunit_no }">
		
		<div class="textarea_wrapper">
			<div class="examinfo_title_textarea">
				<font class="title_font" id="examinfo_title_font">제목</font>
				<textarea id="examinfo_title" name="examinfo_title" placeholder="예시 : 명절 때 학벌은 자랑할만하지만 사시 패스 못하면.."></textarea>
			</div>
			<div class="examinfo_process_textarea">
				<font class="title_font" id="examinfo_process_font">과정</font>
				<textarea id="examinfo_process" name="examinfo_process" placeholder="예시 : 명절 때 학벌은 자랑할만하지만 사시 패스 못하면.."></textarea>
			</div>
			<div class="examinfo_question_textarea">
				<font class="title_font" id="examinfo_question_font">질문</font>
				<textarea id="examinfo_question" name="examinfo_question" placeholder="예시 : 명절 때 학벌은 자랑할만하지만 사시 패스 못하면.."></textarea>
			</div>
		</div>
		
		<div class="bottom_wrapper">
			<div class="evaluation_wrapper">
				<div class="examinfo_level_div">
					<span class="examinfo_level_title">
						<font class="title_font" id="examinfo_level_font">난이도</font>
					</span><p>
					<div class="examinfo_level_value_div">
						<c:forEach var="i" begin="1" end="5">
							<c:choose>
								<c:when test="${ i < 3 }">
									<input type="radio" id="examinfo_level_${i}" name="examinfo_level" value="${i}" onclick="javascript:score_selected('${i}')" style="display: none;">
									<label for="examinfo_level_${i}" id="examinfo_level_label_${i}" style="display: inline-block;background-image:url('../img/view/review/star_selected.png');width:30px;height:30px;background-repeat:no-repeat;padding: 10px 10px;" onmouseover="javascript:score_selected('${i}')"></label>
								</c:when>
								<c:when test="${ i == 3 }">
									<input type="radio" id="examinfo_level_${i}" name="examinfo_level" value="${i}" checked="checked" onclick="javascript:score_selected('${i}')" style="display: none;">
									<label for="examinfo_level_${i}" id="examinfo_level_label_${i}" style="display: inline-block;background-image:url('../img/view/review/star_selected.png');width:30px;height:30px;background-repeat:no-repeat;padding: 10px 10px;" onmouseover="javascript:score_selected('${i}')"></label>
								</c:when>
								<c:otherwise>
									<input type="radio" id="examinfo_level_${i}" name="examinfo_level" value="${i}" onclick="javascript:score_selected('${i}')" style="display: none;">
									<label for="examinfo_level_${i}" id="examinfo_level_label_${i}" onmouseover="javascript:score_selected('${i}')"></label>
								</c:otherwise>
							</c:choose>
						</c:forEach>&nbsp;&nbsp;
						<span class="examinfo_level_text">보통</span>
					</div>
				</div>
			</div>
			
			<div class="info_div">
				<div class="examinfo_result_div">
					<font class="title_font" id="examinfo_result_font">합격여부 :&nbsp;
					<input type="radio" name="examinfo_result" value="-1">불합격
					<input type="radio" name="examinfo_result" value="0" checked="checked">대기
					<input type="radio" name="examinfo_result" value="1">합격</font>
				</div><br><br>
				
				<div class="examinfo_result_div">
					<font class="title_font" id="examinfo_result_font">시험날짜
					<input type="text" id="examinfo_examdate" name="examinfo_examdate"></font>
				</div>
			</div>
			
			<div class="button_wrapper">
				<a href="javascript:registerExaminfo()">등록</a>
			</div><br>
		</div>
	</form>
</div>
</body>
</html>